<template>
	<view>
		<view class="calculate">
			<view class="header">
				<view class='time' @click="showmunu">
					<van-icon name="calendar-o" size='50rpx' />
					<view class="text">{{time}}</view>
					<van-icon name="arrow-down" />
				</view>
				<view class="title">{{result}}</view>
			</view>
			<view class="pay">
				<view class="left">
					<view class="box1" @click="input('7')">7</view>
					<view class="box1" @click="input('8')">8</view>
					<view class="box1" @click="input('9')">9</view>

					<view class="box1" @click="input('+')">+</view>
					<view class="box1" @click="input('4')">4</view>
					<view class="box1" @click="input('5')">5</view>
					<view class="box1" @click="input('6')">6</view>
					<view class="box1" @click="calculate()">=</view>
					<view class="box1" @click="input('1')">1</view>
					<view class="box1" @click="input('2')">2</view>
					<view class="box1" @click="input('3')">3</view>
					<view class="box1" @click="input('-')">-</view>
					<view class="box1" @click="input('.')">.</view>
					<view class="box1" @click="input('0')">0</view>

					<view class="box1" @click="backspace()">
						<van-icon name="arrow-left" />
					</view>
					<view class="box1" @click="commitdata()">完成</view>
				</view>

			</view>
		</view>
		<van-popup :show="show" position="bottom" :round="true" custom-style='height:450rpx' integer>
			<van-datetime-picker type="date" :value="value" @input="onInput" :max-date="maxDate" title='选择时间'
				@confirm='confirmtime' @cancel='canceltime' />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		props:['attribute'],
		data() {
			return {
				result: '0', // 计算结果
				operator: '', // 当前操作符
				firstOperand: '', // 第一个操作数
				secondOperand: '', // 第二个操作数
				show: false,
				maxDate: new Date().getTime(),
				value: new Date().getTime(),
				year: new Date().getFullYear(),
				day: new Date().getDate(),
				month: new Date().getMonth() + 1,
				activeone: 0,
			};
		},
		computed: {
			...mapState('m_pay', ['payinfo']),
			...mapState('m_user', ['token', 'userinfo']),
			time() {
				return this.year + "/" + this.month + "/" + this.day
			}
		},
		mounted() {
			// 监听自定义事件
			uni.$on('mychoose', event => {
				this.activeone=event.data
			});
		},
		methods: {
			...mapMutations('m_pay', ['updatepayinfo']),
			input(digit) { // 添加数字和小数点
				if (this.firstOperand && this.operator && this.secondOperand && digit == '+' || digit == '-') {
					this.calculate()
				}
				if(!this.firstOperand&&(digit === '-' || digit === '+')) return
				if (digit === '.' && this.result[this.result.length - 1] === '.') { // 避免重复添加小数点
					return;
				}
				if (this.result == '0') {
					this.result = ''
				}
				if ((digit === '-' || digit === '+') && this.operator) return
				if (digit == '.' && this.operator) return
				this.result = this.result.concat(digit); // 添加数字和小数点
				if (digit === '-' || digit === '+') {
					this.operator = this.operator.concat(digit)
				} else if (!this.operator) {
					this.firstOperand = this.firstOperand.concat(digit);
				} else {
					this.secondOperand = this.secondOperand.concat(digit);
				}
			},
			clear() { // 清空结果
				this.result = '0';
				this.operator = '';
				this.firstOperand = '';
				this.secondOperand = '';
			},
			backspace() { // 撤回
				this.result = this.result.slice(0, -1);
				if (this.result == '') this.result = '0'
			},
			calculate() { // 计算
				if (!this.secondOperand) { // 如果还没有第二个操作数，则不进行计算
					return;
				}
				const first = parseFloat(this.firstOperand);
				const second = parseFloat(this.secondOperand);
				let result = 0;
				if (this.operator == '+') {
					result = first + second;
				} else {
					result = first - second;
				}
				this.result = result.toString(); // 将计算结果转换为字符串类型显示

				this.operator = '';
				this.firstOperand = this.result;
				this.secondOperand = '';
			},
			showmunu() {
				this.show = true
			},
			confirmtime() {
				this.show = false
				const date = new Date(this.value); // 创建一个 Date 对象，传入时间戳作为参数
				this.year = date.getFullYear(); // 获取年份
				this.month = date.getMonth() + 1; // 获取月份（注意要加 1，因为月份是从 0 开始计数）
				this.day = date.getDate(); // 获取日期
			},
			canceltime() {
				this.show = false
			},
			onInput(e) {
				this.value = e.detail
			},
			async commitdata() {
				if (this.firstOperand&&this.operator&&!this.secondOperand ) return
				if (this.firstOperand && this.operator && this.secondOperand) {
					this.calculate()
				}
				let index=''
				console.log(this.activeone)
				if(this.activeone==0) index='购物'
				else if(this.activeone==1)  index='社交'
				else if(this.activeone==2)  index='医疗'
				else if(this.activeone==3)  index='教育'
				else if(this.activeone==5)  index='工资'
				else if(this.activeone==6)  index='兼职'
				else if(this.activeone==7)  index='理财'
				else if(this.activeone==8)  index='礼金'
				else  index='其他'
				const data = {
					num: parseFloat(this.result),
					time: this.time,
					type:index,
					attribute:this.attribute==0?'支出':'收入'
				}
				const array = [...this.payinfo]
				array.push(data)
				const result = await uni.$http.post('/update/updatepayinfo', {
					token: this.token,
					payinfo: array
				})
				console.log(77,result)
				if (result.data.status === 0) {
					this.value = ""
					this.updatepayinfo(array)
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration: 1500
					});
					uni.navigateBack()
				} else {
					this.value = ""
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}
				this.clear()
			}
		},


	}
</script>

<style lang="less">
	.calculate {
		margin-top: 50rpx;
		width: 100%;
		height: 500rpx;
		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		border-radius: 30rpx;

		.header {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #eee;

			.time {
				width: 50%;
				height: 20%;
				display: flex;
				font-size: 40rpx;
				border-right: 1rpx solid #eee;

				.text {
					margin-left: 10rpx;
				}
			}

			.title {
				height: 20%;
				width: 50%;
				font-size: 50rpx;

				padding-left: 20rpx;
			}
		}

		.pay {
			width: 100%;
			height: 80%;
			border: 1rpx solid #eee;

			.left {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.box1 {
					width: 25%;
					height: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1rpx solid #eee;
					border-right: 1rpx solid #eee;
				}

				.box1:nth-last-child(-n+3) {
					border-bottom: none;
				}

			}

		}


	}
</style>